<template>
  <div
    class="widget-item-container"
    :class="[
      widgetFormRef == 'showLayout' && selectWidget?.key === element.key ? 'clicked active' : '',
    ]"
  >
    <a-form-item
      class="widget-view"
      v-if="element"
      :key="element.key"
      :label="element.label"
      :labelCol="{ span: 6 }"
    >
      <template v-if="element.type === 'input'">
        <a-input />
      </template>

      <template v-if="element.type === 'password'">
        <a-input-password />
      </template>

      <template v-if="element.type === 'textarea'">
        <a-textarea />
      </template>

      <template v-if="element.type === 'number'">
        <a-input-number />
      </template>

      <template v-if="element.type === 'radio'">
        <a-radio-group>
          <a-radio v-for="item of element.options.options" :key="item.value" :value="item.value">{{
            item.value
          }}</a-radio>
        </a-radio-group>
      </template>

      <template v-if="element.type === 'checkbox'">
        <a-checkbox-group>
          <a-checkbox
            v-for="item of element.options.options"
            :key="item.value"
            :value="item.value"
            >{{ item.value }}</a-checkbox
          >
        </a-checkbox-group>
      </template>

      <template v-if="element.type === 'time'">
        <a-time-picker />
      </template>

      <template v-if="element.type === 'date'">
        <a-date-picker />
      </template>

      <template v-if="element.type === 'rate'">
        <a-rate />
      </template>

      <template v-if="element.type === 'select'">
        <a-select>
          <a-select-option
            v-for="item of element.options.options"
            :key="item.value"
            :value="item.value"
            :label="item.value"
          >
            {{ item.value }}
          </a-select-option>
        </a-select>
      </template>

      <template v-if="element.type === 'switch'">
        <a-switch />
      </template>

      <template v-if="element.type === 'slider'">
        <a-slider />
      </template>
    </a-form-item>
    <div
      class="widget-view-action"
      v-if="widgetFormRef == 'showLayout' && selectWidget?.key === element.key"
    >
      <SvgIcon iconClass="delete" @click.stop="$emit('delete')" />
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import SvgIcon from '../components/SvgIcon.vue';

  export default defineComponent({
    name: 'AntdWidgetFormItem',
    components: {
      SvgIcon,
    },
    props: {
      element: {
        type: Object,
        required: true,
      },
      selectWidget: {
        type: Object,
      },
      widgetFormRef: {
        type: String,
      },
    },
    emits: ['delete'],
  });
</script>
